<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>我的购物车</title>

    <link rel="stylesheet" type="text/css" href="/static/home/css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="/static/home/css/pages-cart.css" />
</head>

<body>
	<!--head-->
	{include file="../application/home/view/base/top.html" /}
	<div class="cart py-container">
		<!--logoArea-->
		<div class="logoArea">
			<div class="fl logo"><span class="title">购物车</span></div>
			<div class="fr search">
				<form class="sui-form form-inline">
					<div class="input-append">
						<input type="text" type="text" class="input-error input-xxlarge" placeholder="品优购自营" />
						<button class="sui-btn btn-xlarge btn-danger" type="button">搜索</button>
					</div>
				</form>
			</div>
		</div>
		<!--All goods-->
		<form action="/home/search/getOrderInfo" method="post">
			<div class="allgoods">
				<h4>全部商品<span>11</span></h4>
				<div class="cart-main">
					<div class="yui3-g cart-th">
						<div class="yui3-u-1-4">
							<input type="checkbox"  id="selectAll" value="" /> 全部
						</div>
						<div class="yui3-u-1-4">商品</div>
						<div class="yui3-u-1-8">单价（元）</div>
						<div class="yui3-u-1-8">数量</div>
						<div class="yui3-u-1-8">小计（元）</div>
						<div class="yui3-u-1-8">操作</div>
					</div>
					<div class="cart-item-list">
						<div class="cart-body">
							{foreach $cart_list as $key=>$v}
							<div class="cart-list">
								<ul class="goods-list yui3-g">
									<li class="yui3-u-1-24">
										<input type="checkbox"  name="id[]" class="checkbox gc" value="{$v.id}" />
									</li>
									<li class="yui3-u-11-24">
										<div class="good-item">
											<div class="item-img"><img src="{$v.cart_goods_img}" /></div>
											<div class="item-msg">{$v.cart_goods_name}</div>
											<div class="item-msg">{$v.cart_sku_attr}</div>
										</div>
									</li>
									
									<li class="yui3-u-1-8">
										<span class="price">{$v.cart_goods_price}</span>
									</li>
									<li class="yui3-u-1-8">
										<a href="javascript:void(0)"  name="{$v.id}" class="increment mins">-</a>
										<input autocomplete="off" type="text" id="num" value="{$v.cart_goods_num}" class="itxt" />
										<a href="javascript:void(0)" name="{$v.id}" class="increment plus">+</a>
									</li>
									<li class="yui3-u-1-8 total_price">
										<span id="price" class="sum">{$v.cart_goods_price*$v.cart_goods_num}</span>
									</li>
									<li class="yui3-u-1-8">
										<a href="" onclick="del('{$v.id}')">删除</a><br/>
									</li>
								</ul>
							</div>
							{/foreach}
						</div>
						
					</div>
				
				</div>
				<div class="cart-tool">
				
					<div class="toolbar">
						<div class="chosed">已选择<span id="total_num">{$total_num}</span>件商品</div>
						<div class="sumprice">
							<span><em>总价（不含运费） ：</em>¥<i class="summoney" id="total">{$total_price}</i></span><br>
							<span><em>已节省：</em><i>-¥0.00</i></span>
						</div>
						<div class="sumbtn">
							<!-- <a class="sum-btn" id="jiesuan" style="cursor:pointer" target="_blank">结算</a> -->
							<input type="submit"  class="sum-btn btn btn-danger" style="width:80px;height:40px;" onclick="javascript:return checksubmit();" value="结算">
						</div>
					</div>
				</div>
			</form>
			<div class="clearfix"></div>
			<div class="deled">
				<span>已删除商品，您可以重新购买或加关注：</span>
				<div class="cart-list del">
					<ul class="goods-list yui3-g">
						<li class="yui3-u-1-2">
							<div class="good-item">
								<div class="item-msg">Apple Macbook Air 13.3英寸笔记本电脑 银色（Corei5）处理器/8GB内存</div>
							</div>
						</li>
						<li class="yui3-u-1-6"><span class="price">8848.00</span></li>
						<li class="yui3-u-1-6">
							<span class="number">1</span>
						</li>
						<li class="yui3-u-1-8">
							<a href="#none">重新购买</a>
							<a href="#none">移到我的关注</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="liked">
				<ul class="sui-nav nav-tabs">
					<li class="active">
						<a href="#index" data-toggle="tab">猜你喜欢</a>
					</li>
					<li>
						<a href="#profile" data-toggle="tab">特惠换购</a>
					</li>
				</ul>
				<div class="clearfix"></div>
				<div class="tab-content">
					<div id="index" class="tab-pane active">
						<div id="myCarousel" data-ride="carousel" data-interval="4000" class="sui-carousel slide">
							<div class="carousel-inner">
								<div class="active item">
									<ul>
										<li>
											<img src="/static/home/img/like1.png" />
											<div class="intro">
												<i>Apple苹果iPhone 6s (A1699)</i>
											</div>
											<div class="money">
												<span>$29.00</span>
											</div>
											<div class="incar">
												<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span class="cartxt">加入购物车</span></a>
											</div>
										</li>
										<li>
											<img src="/static/home/img/like2.png" />
											<div class="intro">
												<i>Apple苹果iPhone 6s (A1699)</i>
											</div>
											<div class="money">
												<span>$29.00</span>
											</div>
											<div class="incar">
												<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span class="cartxt">加入购物车</span></a>
											</div>
										</li>
										<li>
											<img src="/static/home/img/like3.png" />
											<div class="intro">
												<i>Apple苹果iPhone 6s (A1699)</i>
											</div>
											<div class="money">
												<span>$29.00</span>
											</div>
											<div class="incar">
												<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span class="cartxt">加入购物车</span></a>
											</div>
										</li>
										<li>
											<img src="/static/home/img/like4.png" />
											<div class="intro">
												<i>Apple苹果iPhone 6s (A1699)</i>
											</div>
											<div class="money">
												<span>$29.00</span>
											</div>
											<div class="incar">
												<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span class="cartxt">加入购物车</span></a>
											</div>
										</li>
									</ul>
								</div>
								<div class="item">
									<ul>
										<li>
											<img src="/static/home/img/like1.png" />
											<div class="intro">
												<i>Apple苹果iPhone 6s (A1699)</i>
											</div>
											<div class="money">
												<span>$29.00</span>
											</div>
											<div class="incar">
												<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span class="cartxt">加入购物车</span></a>
											</div>
										</li>
										<li>
											<img src="/static/home/img/like2.png" />
											<div class="intro">
												<i>Apple苹果iPhone 6s (A1699)</i>
											</div>
											<div class="money">
												<span>$29.00</span>
											</div>
											<div class="incar">
												<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span class="cartxt">加入购物车</span></a>
											</div>
										</li>
										<li>
											<img src="/static/home/img/like3.png" />
											<div class="intro">
												<i>Apple苹果iPhone 6s (A1699)</i>
											</div>
											<div class="money">
												<span>$29.00</span>
											</div>
											<div class="incar">
												<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span class="cartxt">加入购物车</span></a>
											</div>
										</li>
										<li>
											<img src="/static/home/img/like4.png" />
											<div class="intro">
												<i>Apple苹果iPhone 6s (A1699)</i>
											</div>
											<div class="money">
												<span>$29.00</span>
											</div>
											<div class="incar">
												<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span class="cartxt">加入购物车</span></a>
											</div>
										</li>
									</ul>
								</div>
							</div>
							<a href="#myCarousel" data-slide="prev" class="carousel-control left">‹</a>
							<a href="#myCarousel" data-slide="next" class="carousel-control right">›</a>
						</div>
					</div>
					<div id="profile" class="tab-pane">
						<p>特惠选购</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 底部栏位 -->
	<!--页面底部-->
	{include file="../application/home/view/base/footer.html" /}
<!--页面底部END-->

<script type="text/javascript" src="/static/home/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/static/home/js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="/static/home/js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="/static/home/js/widget/nav.js"></script>
<script>
// 计算总价和总的件数
function compute_price()
{
	var tp = 0;
	var tp_num = 0;
	$(".gc:checked").each(function(){
		tp += parseFloat($(this).parent().parent().find(".sum").text());
		tp_num += parseInt($(this).parent().parent().find(".itxt").val());
	});
	$("#total").text("￥"+tp);
	$("#total_num").text(tp_num);
}

	$(".plus").click(function(){ //+
		var id = $(this).attr('name');
		var _thisInput = $(this).siblings("input");
		_thisInput.val(eval(_thisInput.val()) + 1);
		var _thisprice = $(this).parent().next().children();
		// console.log(_thisprice);
		$.ajax({
			url:"/home/cart/addNum/id/"+id,
			type:"get",
			success:function(data){

				_thisprice.html(data.price);
				

				var total = 0;
				var total_num = 0;
				$(".itxt").each(function(){
					total_num += parseInt($(this).val());
				});
				$(".total_price").each(function(){
					total += parseFloat($(this).text());
				});
				//总计金额
				$("#total").text(total.toFixed(2));
				$("#total_num").text(total_num);
			}
		});

	});

	$(".mins").click(function(){ //-
		var id = $(this).attr('name');
		var _thisInput = $(this).siblings("input");
		var _thisprice = $(this).parent().next().children();
		if(eval(_thisInput.val()) == 1){
        return ;
    	}
		_thisInput.val(eval(_thisInput.val()) - 1);
		$.ajax({
			url:"/home/cart/delNum/id/"+id,
			type:"get",
			success:function(data){
				_thisprice.html(data.price);
				var total = 0;
				var total_num = 0;
				$(".itxt").each(function(){
					total_num += parseInt($(this).val());
				}); 
				$(".total_price").each(function(){
					total += parseFloat($(this).text());
				});
				//总计金额
				$("#total").text(total.toFixed(2));
				$("#total_num").text(total_num);
			}
		});
	});

	function del(id) { 
		var msg = "您真的确定要删除吗？\n\n请确认！"; 
		if (confirm(msg)==true){ 
			
			$.ajax({
				url:'/home/cart/delete/id/'+id,
				type:'get',
				success:function(data){
					console.log(data);
				}
			});
		}else{ 
			return false; 
		} 
	} 

	var all = $("#selectAll");
	var s = $("input[name='ids']");
	var check = [];
    s.each(function(i) {

		$(this).click(function(){
			var choicelength=$("input[type='checkbox'][name='id[]']").length;
			var choiceselect=$("input[type='checkbox'][name='id[]']:checked").length;

			if(choicelength==choiceselect){
			$("#selectAll").prop("checked",true);   // 子复选框全部部被选择，全选也被选择；1.对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法；2.对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
			}
			if(this.checked==true){
				if(check.length<1){
					compute_price();
					check.push(this.value);
				}else{
					for(i=0;i<check.length;i++){
						if(check[i]==this.value){
							return;
						}
					}
					check.push(this.value);
					compute_price();
				}
				console.log(check);
			}else{
				
				check.remove(this.value);
				$("#selectAll").prop("checked",false);
				compute_price();
				console.log(check);
			}
			
		});
	});
	
	all.click(function(){
		if(this.checked==true){
			var total=0;
			var total_num=0;
			$(".itxt").each(function(){
				total_num += parseInt($(this).val());
			});
			$(".total_price").each(function(){
				total += parseFloat($(this).text());
			});
			$("#total").text(total.toFixed(2));
			$("#total_num").text(total_num);
			$(":checkbox[name='id[]']").prop("checked", this.checked); // this指代的你当前选择的这个元素的JS对象
			if(check.length<1){
				s.each(function(i) {
				check.push(this.value);
				console.log(check);
				})
			}
			
		}else if(this.checked==false){
			$("#total").text(0);
			$("#total_num").text(0);
			$(":checkbox[name='id[]']").prop("checked", this.checked); // this指代的你当前选择的这个元素的JS对象
			s.each(function(i) {
			check.remove(this.value);
			console.log(check);
			})
		}

		
		
	});
	 function checksubmit()
	  {
	   var sel =$(":checkbox");
	   if(sel.length==0){
	        return false;
	   }
	   return true;
	  }
	// $("#jiesuan").click(function(){
	// 	if(check.length>0){
	// 		// console.log(check);
	// 		var json = JSON.stringify(check);
	// 		$.ajax({
	// 			url:"/home/search/getOrderInfo",
	// 			type:"post",
	// 			data:{'check' : json}, 
	// 			success: function(data){

	// 				// console.log(data);
	// 				// location.href = '/home/search/getOrderInfo';
	// 			}
	// 		});
	// 	}
	// });
	

	Array.prototype.indexOf = function(val) {
		for (var i = 0; i < this.length; i++) {
			if (this[i] == val) return i;
			}
		return -1;
	};

	Array.prototype.remove = function(val) {
		var index = this.indexOf(val);
		if (index > -1) {
		this.splice(index, 1);
		}
	};
	
</script>
</body>

</html>